window.onload = () => {
    var list = [
        {
            id: 625153951363,
            name: "2020西太湖国际音乐节",
            price: 199,
            num: 3,
            maxNum: 6,
            totalPrice: 597,
            check: true,
            pic: "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01zJEpaN2GdSG1Xvo8y_!!2251059038.jpg",
        },
        {
            id: 624506842658,
            name: "2020舟山东海音乐节",
            price: 200,
            num: 2,
            maxNum: 10,
            totalPrice: 400,
            check: true,
            pic: "https://img.alicdn.com/bao/uploaded/i4/2251059038/O1CN01L70FVl2GdSG2wpwyE_!!0-item_pic.jpg",
        },
        {
            id: 623216520608,
            name: "中国•磐安 2020氧气山水音乐节",
            price: 280,
            num: 1,
            maxNum: 6,
            totalPrice: 280,
            check: false,
            pic: "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01ECp69h2GdSFpoUPAm_!!2251059038.jpg",
        },
        {
            id: 624345993344,
            name: "2020“一生中最爱”七夕演唱会",
            price: 180,
            num: 1,
            maxNum: 8,
            totalPrice: 180,
            check: false,
            pic: "https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01WGNYBE2GdSFqXJgII_!!0-item_pic.jpg",
        }
    ];

    let content = document.querySelector('.content');
    let allSelect = document.querySelector('.allSelect');
    let selected = document.querySelector('.selected>span');
    let total = document.querySelector('.total>span');
    let totalPrice_All = document.querySelector('.totalPrice_All>span');

    function createUl(data) {
        // 创建ul节点
        let ul = document.createElement('ul');
        data.forEach((item) => {
            let li = document.createElement('li');
            let checked = item.check ? 'checked' : '';
            li.innerHTML = `
                <input type="checkbox" class="dataCheck" ${checked}>
                <div class="imgBox"><img src="${item.pic}"></div>
                <div class="nameBox"><p class="dataName">${item.name}</p></div>
                <p class="dataPrice">￥<span>${item.price}</span></p>
                <div class="dataNum">
                    <button class="reduceNum">-</button>
                    <span>${item.num}</span>
                    <button class="addNum">+</button>
                </div>
                <p class="totalPrice">￥<span>${item.totalPrice}</span></p>
                <button class="dataDel">删除</button>
            `
            ul.appendChild(li);
        })

        // 渲染列表
        content.appendChild(ul);

        // 初始化商品数量、总价
        statistic(list);

        let select = document.querySelectorAll('li>input');
        // 全选按钮
        allSelect.onclick = function () {
            for (let i = 0; i < select.length; i++) {
                select[i].checked = allSelect.checked;
            }
            list.forEach((item) => {
                item.check = allSelect.checked;
            })
            statistic(list);
            // console.log(list);
        }
        // li勾选按钮
        select.forEach(function (item, index) {
            item.onclick = function () {
                list[index].check = item.checked;
                let count = statistic(list);
                allSelect.checked = count === select.length ? true : false;
                // console.log(list);
            }
        })

        let dataNum = document.querySelectorAll('.dataNum>span');
        let addNum = document.querySelectorAll('.addNum');
        let reduceNum = document.querySelectorAll('.reduceNum');
        let totalPrice = document.querySelectorAll('.totalPrice>span');
        // 增加商品数量
        addNum.forEach((item, index) => {
            item.onclick = (e) => {
                if(list[index].num >= list[index].maxNum) return;

                list[index].num = list[index].num + 1;
                dataNum[index].innerText = list[index].num;

                list[index].totalPrice = list[index].num * list[index].price;
                totalPrice[index].innerText = list[index].totalPrice;

                statistic(list);
            }
        })
        // 减少商品数量
        reduceNum.forEach((item, index) => {
            item.onclick = (e) => {
                let span = e.target.nextElementSibling;
                if (list[index].num <= 1) return;
                list[index].num = list[index].num - 1;
                span.innerText = list[index].num;

                list[index].totalPrice = list[index].num * list[index].price;
                totalPrice[index].innerText = list[index].totalPrice;

                statistic(list);
                // console.log(list);
            }
        })

        // 删除当前商品
        delCurrent();

        // 判断全选状态
        if (list == ''){
            allSelect.checked = false
        }else{
            let select = document.querySelectorAll('li>input');
            let count = statistic(list);
            allSelect.checked = count === select.length ? true : false;
        };
    }

    createUl(list);

    // 统计
    function statistic(data) {
        let count = 0;
        let totalNum = 0;
        let tpa = 0;
        data.forEach(function (item) {
            if (item.check == true) {
                count++;
                totalNum += item.num;
                tpa += item.totalPrice;
            }
        })
        total.innerText = totalNum;
        totalPrice_All.innerText = tpa;
        return count;
    }

    // 删除当前商品
    function delCurrent() {
        let dataDel = document.querySelectorAll('.dataDel');
        dataDel.forEach((item, index) => {
            item.onclick = (e) => {
                list.splice(index, 1);
                let ul = document.querySelector('ul')
                ul.remove();
                createUl(list);
                delCurrent();
                // console.log(list);
                
                if (list == ''){
                    allSelect.checked = false
                }else{
                    let select = document.querySelectorAll('li>input');
                    let count = statistic(list);
                    allSelect.checked = count === select.length ? true : false;
                };
            }
        })
    }

    // 删除已选择商品
    let delSelected = document.querySelector('.delSelected');
    delSelected.onclick = () => {
        function del() {
            list.forEach((item, index) => {
                if (item.check) {
                    list.splice(index, 1);
                    del();
                }
            })
        }
        del();
        if (list == '') allSelect.checked = false;
        let ul = document.querySelector('ul')
        ul.remove();
        createUl(list);
    }

    // 清空购物车
    let delAll = document.querySelector('.delAll');
    delAll.onclick = () => {
        list = [];
        allSelect.checked = false;
        let ul = document.querySelector('ul')
        ul.remove();
        createUl(list);
    }























}